<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="../../commons/import_taglibs.jsp" %>
<style>
    #dataTables-example {
        table-layout: fixed;
        width: 100%;
    }

    .nowrap {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
    }
</style>
<div class="panel panel-default">

    <ol class="breadcrumb" style="margin-bottom:0px;">
        <li>部署管理</li>
        <li class="active"><b>项目列表</b></li>
    </ol>

    <div class="panel-body">
        <div class="well" style="margin-bottom: 0px;border-radius: 4px 4px 0 0;">
            <form role="form" id="searchForm" class="form-horizontal" >
                <label class="control-label">所属项目：</label>
                <select class="form-control" style="display: inline; width: auto;" name="projectId" id="projectId">
                    <option value="">--所有--</option>
                    <c:forEach items="${projectList}" var="project">
                        <option value="${project.id}">${project.name}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;${project.path}</option>
                    </c:forEach>
                </select>

                <button type="button" class="btn btn-outline btn-primary" id="queryBtn">查询</button>
                <button type="button" class="btn btn-outline btn-default" id="resetBtn">重置</button>
            </form>
        </div>

        <div class="dataTable_wrapper" id="dataList">
        </div>
    </div>
</div>
<script>
    //
    function queryPage(_pageIdx) {
        layer.load(0, { shade: [0.1, '#000'] });
        $("#dataList").load("/deploy/info/page?" + $("#searchForm").serialize() + "&pageNumber=" + _pageIdx, function(){
            // 关闭loading效果
            setTimeout(function(){ layer.closeAll('loading'); }, 300);
        })
    }

    $(function () {
        queryPage(1);

        $('#queryBtn').on("click", function(){
            queryPage(1);
        });
        $('#resetBtn').on("click", function(){
            $("#searchForm")[0].reset();
            queryPage(1);
        });
    });
</script>